<template>
  <div class="app-container">
    <!-- <el-menu :default-active="listQuery.tab" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="all">全部</el-menu-item>
      <el-menu-item index="my">小组</el-menu-item>
    </el-menu> -->
    <!--搜索-->
    <el-form :inline="true" :model="listQuery" size="mini" label-width="100px" style="margin-top:20px">
      <el-form-item label="搜索人员：">
        <el-select v-model="listQuery.userRealName" filterable clearable>
          <el-option
            v-for="item in userOptionList"
            :key="item.userId"
            :label="item.userName"
            :value="item.userName">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="搜索小组：">
        <el-select v-model="listQuery.groupName" filterable clearable>
          <el-option
            v-for="(item,index) in groupSetList"
            :key="index"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          @click="handleSearchList()"
          type="primary">
          查询
        </el-button>
        <el-button
          @click="addGroupUser('add')"
          type="primary">
          添加人员
        </el-button>
      </el-form-item>
    </el-form>
    <div style="width: 1000px;">
      <el-table
        v-loading="listLoading"
        :data="tableData"
        border
        height="400"
        style="width:100%">
        <el-table-column label="名称" min-width="100" align="center" prop="userRealName">
        </el-table-column>
        <el-table-column label="组别" min-width="200" align="center" prop="groupName">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          min-width="300"
          align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="addGroupUser('edit',scope.row)">编辑
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="delGroupUser(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes,prev, pager, next,jumper"
          :current-page.sync="listQuery.pageNum"
          :page-size="listQuery.pageSize"
          :page-sizes="[10,15,20]"
          :total="count">
        </el-pagination>
      </div>
    </div>


    <!--新增 编辑人员-->
    <el-dialog
      :close-on-click-modal="false"
      :title="groupTitle"
      :visible.sync="dialogVisibleGroup"
      width="400px">
      <el-form :model="groupUserForm" size="mini" label-width="100px" ref="groupUserForm" :rules="rules">
        <el-form-item label="姓名：" prop="userId">
          <el-select v-model="groupUserForm.userId" filterable clearable>
            <el-option
              v-for="item in userOptionList"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组别：" prop="groupName">
          <el-select v-model="groupUserForm.groupName" filterable clearable>
            <el-option
              v-for="(item,index) in groupSetList"
              :key="index"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleConfirm" :loading="btnLoading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getOrderUsersList } from '@/api/partner';
import {
  groupUserListAPI,
  groupSetListAPI,
  editGroupUserAPI,
  delGroupUserAPI,
} from '@/api/order';
import { mapGetters } from 'vuex';
const defaultListQuery = {
  pageNum: 1,
  pageSize: 10,
  groupName: '',//组名称
  userRealName:'',//人员姓名
};
const defaultGroupUserForm = {
  userId: '',
  groupName:''
};
export default {
  name: "index",
  data() {
    return {
      listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
      tableData: [],
      count: 0,
      listLoading: false,
      btnLoading: false,
      groupSetList:[],
      groupUserForm: JSON.parse(JSON.stringify(defaultGroupUserForm)),
      dialogVisibleGroup: false,
      groupTitle:'',
      userOptionList: [],
      rules: {
        userId: [{ required: true, message: '请选择人员姓名', trigger: 'change' },],
        groupName: [{ required: true, message: '请选择组别', trigger: 'change' },],
      },
    }
  },
  components: {

  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),


  },
  created() {
    this.getUserOptionList()
    this.getGroupSetList()
    this.getList()
  },
  filters: {
  },
  methods: {
    //删除
    delGroupUser(item) {
      let msg = '确定删除该人员吗?'
      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delGroupUserAPI({
          ugId: item.ugId,
        }).then((res) => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          this.getList()
        })
      }).catch(() => {})
    },

    //获取员工下拉选项
    getUserOptionList() {
      getOrderUsersList({ status: 1 }).then((res) => {
        this.userOptionList = res;
      })
    },

    //获取小组列表
    getGroupSetList(){
      groupSetListAPI().then((res) => {
        this.groupSetList = res.groupList;
      })
    },

    //新增 编辑
    addGroupUser(type,item) {
      this.dialogVisibleGroup = true;
      if (type == "add") {
        this.groupTitle = '添加人员';
        this.groupUserForm = JSON.parse(JSON.stringify(defaultGroupUserForm));
      } else if (type == 'edit') {
        this.groupTitle = '编辑人员';
        for (let key in defaultGroupUserForm) {
          this.groupUserForm[key] = item[key] ? item[key] : defaultGroupUserForm[key];
        }
      }
    },

    //关闭
    handleClose() {
      this.dialogVisibleGroup = false;
      this.btnLoading = false;
      this.$refs.groupUserForm.clearValidate();
    },

    //确认
    handleConfirm() {
      this.$refs.groupUserForm.validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          let data = JSON.parse(JSON.stringify(this.groupUserForm))
          editGroupUserAPI(data).then((res) => {
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            this.btnLoading = false;
            this.handleClose();
            this.getList();
          }).catch(() => {
            this.btnLoading = false;
          })
        }
      })
    },

    // handleSelect(key, keyPath) {
    //   this.listQuery = JSON.parse(JSON.stringify(defaultListQuery))
    //   this.listQuery.tab = key;
    //   this.handleSearchList();
    // },

    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },

    handleSearchList() {
      this.listQuery.pageNum = 1;
      this.getList();
    },

    //获取列表
    getList() {
      this.listLoading = true;
      groupUserListAPI(this.listQuery).then(response => {
        this.tableData = response.list;
        this.count = response.count;
        this.listLoading = false;
      }).catch(() => {
        this.listLoading = false;
      });
    },
  },
};
</script>


